<template>
  <div id="youngcadresedit">
    <div v-show="formLoading">数据加载中...</div>
    <div>
      <div v-show="!personInfoLoaded" style="color:red;font-weight:bolder">单位编码可能有误</div>
      <el-form :model="editForm" label-width="200px" ref="editForm" :inline="true" style="padding:10px 0 0;clear:both" v-show="!formLoading&&personInfoLoaded" :rules="editFormRules">
        <table cellspacing="0" cellpadding="0" class="mytable">
          <tr>
            <th>年度</th>
            <td>
              <template v-if="readOnly">{{editForm.nd}}</template>
              <el-form-item prop="nd" v-else>
                <el-date-picker v-model="editForm.nd" type="year" placeholder="选择要添加的年度" value-format="yyyy" format="yyyy" :disabled="!!editForm.id"></el-date-picker>
              </el-form-item>
            </td>
            <th>司局或单位名称</th>
            <td style="vertical-align: middle;">
              <template>{{showunitname}}</template>
            </td>
            <th>身份证号</th>
            <td style="vertical-align: middle;">
              <template>{{editForm.sfzh}}</template>
            </td>
          </tr>
          <tr>
            <th>姓名</th>
            <td style="vertical-align: middle;width:220px">
              <template>{{editForm.xm}}</template>
            </td>
            <th>性别</th>
            <td style="vertical-align: middle;width:230px">
              <template>{{id2name(editForm.xb,xboptions)}}</template>
            </td>
            <th>出生年月</th>
            <td style="width:230px">
              <template v-if="readOnly">{{formatDate(editForm.csny)}}</template>
              <el-form-item prop="csny" v-else>
                <el-input v-model="editForm.csny" style="width:170px" placeholder="如20201001或202010"></el-input>
                <el-tooltip class="item" effect="dark" content="格式：20201001或202010" placement="top">
                  <el-button type="text" icon="el-icon-info" />
                </el-tooltip>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <th>政治面貌</th>
            <td>
              <template v-if="readOnly">{{id2name(editForm.zzmm,zzmmoptions)}}</template>
              <el-form-item prop="zzmm" v-else>
                <el-select v-model="editForm.zzmm" placeholder="请选择">
                  <el-option
                    v-for="item in zzmmoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <th>参加工作时间</th>
            <td>
              <template v-if="readOnly">{{formatDate(editForm.cjgzsj)}}</template>
              <el-form-item prop="cjgzsj" v-else>
                <el-input v-model="editForm.cjgzsj" style="width:170px" placeholder="如20201001或202010"></el-input>
                <el-tooltip class="item" effect="dark" content="格式：20201001或202010" placement="top">
                  <el-button type="text" icon="el-icon-info" />
                </el-tooltip>
              </el-form-item>
            </td>
            <th>专业技术职务</th>
            <td>
              <template v-if="readOnly">{{editForm.zyjszw}}</template>
              <el-form-item prop="zyjszw" v-else>
                <el-input v-model="editForm.zyjszw" style="width:200px"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <th>职务</th>
            <td>
              <template v-if="readOnly">{{editForm.zw}}</template>
              <el-form-item prop="zw" v-else>
                <el-input v-model="editForm.zw" style="width:200px"></el-input>
              </el-form-item>
            </td>
            <th>任现职务时间</th>
            <td>
              <template v-if="readOnly">{{formatDate(editForm.rxzwsj)}}</template>
              <el-form-item prop="rxzwsj" v-else>
                <el-input v-model="editForm.rxzwsj" style="width:170px"  placeholder="如20201001或202010"></el-input>
                <el-tooltip class="item" effect="dark" content="格式：20201001或202010" placement="top">
                  <el-button type="text" icon="el-icon-info" />
                </el-tooltip>
              </el-form-item>
            </td>
            <th rowspan="2" style="vertical-align: top;">任相当层次职务职级时间</th>
            <td rowspan="2">
              <template v-if="readOnly">{{formatDate(editForm.rxdcczwzjsj)}}</template>
              <el-form-item prop="rxdcczwzjsj" v-else>
                <el-input v-model="editForm.rxdcczwzjsj" style="width:170px" placeholder="如20201001或202010"></el-input>
                <el-tooltip class="item" effect="dark" content="格式：20201001或202010" placement="top">
                  <el-button type="text" icon="el-icon-info" />
                </el-tooltip>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <th>职级</th>
            <td>
              <template v-if="readOnly">{{editForm.zj}}</template>
              <el-form-item prop="zj" v-else>
                <el-input v-model="editForm.zj" style="width:150px"></el-input>
              </el-form-item>
            </td>
            <th>任现职级时间</th>
            <td>
              <template v-if="readOnly">{{formatDate(editForm.rxzjsj)}}</template>
              <el-form-item prop="rxzjsj" v-else>
                <el-input v-model="editForm.rxzjsj" style="width:170px" placeholder="如20201001或202010"></el-input>
                <el-tooltip class="item" effect="dark" content="格式：20201001或202010" placement="top">
                  <el-button type="text" icon="el-icon-info" />
                </el-tooltip>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <th>近三年考核情况</th>
            <td colspan="8">
              <div v-if="readOnly" v-html="editForm.jsnkhqk.replace(/\n/g,'<br>')"></div>
              <el-input v-else type="textarea" v-model="editForm.jsnkhqk" style="width:100%"></el-input>
            </td>
          </tr>
          <tr>
            <th>教育背景</th>
            <td colspan="8">
              <div v-if="readOnly" v-html="editForm.jybj.replace(/\n/g,'<br>')"></div>
              <el-input v-else type="textarea" v-model="editForm.jybj" style="width:100%"></el-input>
            </td>
          </tr>
          <tr>
            <th>工作简历</th>
            <td colspan="8">
              <div v-if="readOnly" v-html="editForm.gzjl.replace(/\n/g,'<br>')"></div>
              <el-input v-else type="textarea" v-model="editForm.gzjl" style="width:100%" rows="10"></el-input>
            </td>
          </tr>
          <tr>
            <th>分管工作</th>
            <td colspan="8">
              <div v-if="readOnly" v-html="editForm.fggz.replace(/\n/g,'<br>')"></div>
              <el-input v-else type="textarea" v-model="editForm.fggz" style="width:100%"></el-input>
            </td>
          </tr>
          <tr>
            <th>主要特点</th>
            <td colspan="8">
              <div v-if="readOnly" v-html="editForm.zytd.replace(/\n/g,'<br>')"></div>
              <el-input v-else type="textarea" v-model="editForm.zytd" style="width:100%"></el-input>
            </td>
          </tr>
          <tr>
            <th>主要不足</th>
            <td colspan="8">
              <div v-if="readOnly" v-html="editForm.zybz.replace(/\n/g,'<br>')"></div>
              <el-input v-else type="textarea" v-model="editForm.zybz" style="width:100%"></el-input>
            </td>
          </tr>
          <tr>
            <th>调整建议</th>
            <td colspan="8">
              <div v-if="readOnly" v-html="editForm.tzjy.replace(/\n/g,'<br>')"></div>
              <el-input v-else type="textarea" v-model="editForm.tzjy" style="width:100%"></el-input>
            </td>
          </tr>
          <tr>
            <th>备注</th>
            <td colspan="8">
              <div v-if="readOnly" v-html="editForm.bz.replace(/\n/g,'<br>')"></div>
              <el-input v-else type="textarea" v-model="editForm.bz" style="width:100%"></el-input>
            </td>
          </tr>
        </table>
        <div style="margin:0">
          <template v-if="!readOnly">
            <el-button type="primary" @click.native="editFormSubmit()" :loading="saveloading" style="margin-left:10px;">保存</el-button>
          </template>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    timestamp: {
      handler (val) {
        // console.log('aid')
        // console.log(val)
        // this.$refs['editForm'].resetFields()
        this.editFormReset()
        this.getDics(true)
      },
      immediate: true
    }
  },
  props: {
    id: '',
    readOnly: '',
    timestamp: '',
    idCardNo: '',
    unitname: '',
    unitcode: ''
  },
  data () {
    return {
      formLoading: false,
      personInfoLoaded: true,
      showunitname: '',
      pageLoading: false,
      editForm: {
        id: '',
        sfzh: '',
        sjhdwmc: '',
        nd: '',
        xm: '',
        xb: '',
        csny: '',
        zzmm: '',
        cjgzsj: '',
        zyjszw: '',
        zw: '',
        rxzwsj: '',
        rxdcczwzjsj: '',
        zj: '',
        rxzjsj: '',
        jsnkhqk: '',
        jybj: '',
        gzjl: '',
        fggz: '',
        zytd: '',
        zybz: '',
        tzjy: '',
        bz: ''
      },
      editFormRules: {
        nd: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        sfzh: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        xm: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        xb: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        csny: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        zzmm: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        cjgzsj: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        zyjszw: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        zw: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        zj: [
          { required: true, message: '必填项', trigger: 'change' }
        ]
      },
      zzmmoptions: [],
      xboptions: [],
      mzoptions: [],
      saveloading: false
    }
  },
  methods: {
    // removePhoto () {
    //   this.imageUrl = 0
    //   this.importPhotoFlag = false
    // },

    // handleAvatarSuccess (res, file) {
    //   // this.imageUrl = URL.createObjectURL(file.raw)
    //   console.log('test')
    //   if (res.success) {
    //     this.$message({
    //       message: '上传成功！',
    //       type: 'success'
    //     })
    //     this.imageUrl = res.result[0].id
    //     this.importPhotoFlag = false
    //     // this.fileList = []
    //     // this.files = []
    //   } else {
    //     this.$message({
    //       message: '上传失败:' + res.message,
    //       type: 'error'
    //     })
    //   }
    // },
    // beforeAvatarUpload (file) {
    //   const isJPG = file.type === 'image/jpeg'
    //   const isPNG = file.type === 'image/png'
    //   const isGIF = file.type === 'image/gif'
    //   const isLt20M = file.size / 1024 / 1024 < 1

    //   if (!isJPG && !isPNG && !isGIF) {
    //     this.$message.error('请上传标准证件照片图片，上传图片只能是 JPG 或 PNG 格式!')
    //     return false
    //   }
    //   if (!isLt20M) {
    //     this.$message.error('请上传标准证件照片图片，上传图片大小不能超过 1MB!')
    //     return false
    //   }
    // },
    // beforeUpload () {
    //   this.saveloading = true
    // },
    formatDate (str) {
      if (str) {
        return str.slice(0, 4) + '.' + str.slice(4, 6)
      }
    },
    id2name (id, arr) {
      if (id) {
        let myobj = arr.filter(item => parseInt(item.value) === parseInt(id))
        if (myobj && myobj.length > 0) {
          return myobj[0].label
        }
      }
    },
    name2id (name, arr) {
      if (name) {
        let myobj = arr.filter(item => item.label === name)
        if (myobj && myobj.length > 0) {
          return myobj[0].value
        }
      }
    },
    getDics (flag) {
      this.formLoading = true
      this.$http
        .get(this.$http.defaults.analysisAPI + `api/synthesis/jiben/getGenderDictList`)
        .then(response => {
          if (response.data.success) {
            this.xboptions = response.data.result
            this.$http
              .get(this.$http.defaults.analysisAPI + `api/synthesis/jiben/getNationDictList`)
              .then(response => {
                if (response.data.success) {
                  this.mzoptions = response.data.result
                  this.$http
                    .get(this.$http.defaults.analysisAPI + `api/synthesis/jiben/getPoliticalDictList`)
                    .then(response => {
                      if (response.data.success) {
                        this.zzmmoptions = response.data.result
                        if (flag) {
                          if (this.id && this.id !== '') {
                            this.getDetail(this.id)
                          } else {
                            this.getperson()
                            this.editForm.sfzh = this.idCardNo
                          }
                        } else {
                          this.formLoading = false
                        }
                      } else {
                        this.$message({
                          message: '获取失败:' + response.data.message,
                          type: 'error'
                        })
                        this.formLoading = false
                      }
                    })
                    .catch(error => {
                      console.log(error)
                      this.$message({
                        message: '网络获取失败:' + error,
                        type: 'error'
                      })
                      this.formLoading = false
                    })
                } else {
                  this.$message({
                    message: '获取失败:' + response.data.message,
                    type: 'error'
                  })
                  this.formLoading = false
                }
              })
              .catch(error => {
                console.log(error)
                this.$message({
                  message: '网络获取失败:' + error,
                  type: 'error'
                })
                this.formLoading = false
              })
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
            this.formLoading = false
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
          this.pageLoading = false
        })
    },
    getDetail (id) {
      let url = 'api/busPerson/getById'
      this.$http
        .post(this.$http.defaults.analysisAPI + url, {id: id})
        .then(response => {
          this.formLoading = false
          if (response.data.success) {
            this.editForm = response.data.result
            this.showunitname = response.data.result.sjhdwmc
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.formLoading = false
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    handleSelect (item) {
      this.editForm.xm = item.a0101
      this.editForm.zw = item.a0192A
      this.editForm.xb = this.name2id(item.a0104, this.xboptions)
      this.editForm.csny = item.a0107
      this.editForm.zzmm = this.name2id(item.a0141, this.zzmmoptions)
      this.editForm.cjgzsj = item.a0134
      this.editForm.zyjszw = item.a0196
      this.editForm.zw = item.a0192A
      this.editForm.rxzwsj = item.a0288
      this.editForm.zj = item.a0192E
      this.editForm.rxzjsj = item.a0192C
      this.editForm.jsnkhqk = item.a15Z101
      let jybj = ''
      if (item.qrzxl || item.qrzxw || item.qrzxlxx || item.qrzxwxx) {
        jybj = jybj + '全日制教育'
      }
      if (item.qrzxl) {
        jybj = jybj + '学历：' + item.qrzxl + ' '
      }
      if (item.qrzxw) {
        jybj = jybj + '学位：' + item.qrzxw + ' '
      }
      if (item.qrzxlxx) {
        jybj = jybj + '毕业院校：' + item.qrzxlxx + ' '
      }
      if (item.qrzxwxx) {
        jybj = jybj + '专业：' + item.qrzxwxx + ' '
      }
      if (item.qrzxl || item.qrzxw || item.qrzxlxx || item.qrzxwxx) {
        jybj = jybj + '\n'
      }
      if (item.zzxl || item.zzxw || item.zzxlxx || item.zzxwxx) {
        jybj = jybj + '在职教育'
      }
      if (item.zzxl) {
        jybj = jybj + '学历：' + item.zzxl + ' '
      }
      if (item.zzxw) {
        jybj = jybj + '学位：' + item.zzxw + ' '
      }
      if (item.zzxlxx) {
        jybj = jybj + '毕业院校：' + item.zzxlxx + ' '
      }
      if (item.zzxwxx) {
        jybj = jybj + '专业：' + item.zzxwxx + ' '
      }
      console.log(jybj)
      this.editForm.jybj = jybj
      this.editForm.gzjl = item.a1701Text
    },
    getperson () {
      this.showunitname = this.unitname
      let para = {
        idCardNo: this.idCardNo,
        unitname: this.unitname,
        unitcode: this.unitcode
        // unitname: '区委组织部123'
      }
      console.log(para)
      this.formLoading = true
      this.$http
        .get(this.$http.defaults.analysisAPI + `api/synthesis/jiben/findByIdCardNoAndUnit`, {params: para})
        .then(response => {
          this.formLoading = false
          console.log('获取成功')
          if (response.data.result) {
            this.personInfoLoaded = true
            this.handleSelect(response.data.result)
          } else {
            this.personInfoLoaded = false
          }
        })
        .catch(error => {
          this.formLoading = false
          console.log(error)
        })
    },
    editFormReset () {
      console.log('editFormReset')
      this.editForm = {
        id: '',
        sfzh: '',
        sjhdwmc: '',
        nd: '',
        xm: '',
        xb: '',
        csny: '',
        zzmm: '',
        cjgzsj: '',
        zyjszw: '',
        zw: '',
        rxzwsj: '',
        rxdcczwzjsj: '',
        zj: '',
        rxzjsj: '',
        jsnkhqk: '',
        jybj: '',
        gzjl: '',
        fggz: '',
        zytd: '',
        zybz: '',
        tzjy: '',
        bz: ''
      }
      if (this.$refs['editForm']) {
        this.$refs['editForm'].resetFields()
      }
    },
    editFormSubmit (reEnterFlag) {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.saveloading = true
          if (!this.isDate8(this.editForm.csny) && !this.isDate6(this.editForm.csny) && this.editForm.csny) {
            this.$message({
              message: '出生日期格式有误，格式：20201001或202010',
              type: 'error'
            })
            this.saveloading = false
            return false
          }
          if (!this.isDate8(this.editForm.cjgzsj) && !this.isDate6(this.editForm.cjgzsj) && this.editForm.cjgzsj) {
            this.$message({
              message: '参加工作时间格式有误，格式：20201001或202010',
              type: 'error'
            })
            this.saveloading = false
            return false
          }
          if (!this.isDate8(this.editForm.rxzwsj) && !this.isDate6(this.editForm.rxzwsj) && this.editForm.rxzwsj) {
            this.$message({
              message: '任现职务时间格式有误，格式：20201001或202010',
              type: 'error'
            })
            this.saveloading = false
            return false
          }
          if (!this.isDate8(this.editForm.rxdcczwzjsj) && !this.isDate6(this.editForm.rxdcczwzjsj) && this.editForm.rxdcczwzjsj) {
            this.$message({
              message: '任相当层次职务职级时间格式有误，格式：20201001或202010',
              type: 'error'
            })
            this.saveloading = false
            return false
          }
          if (!this.isDate8(this.editForm.rxzjsj) && !this.isDate6(this.editForm.rxzjsj) && this.editForm.rxzjsj) {
            this.$message({
              message: '任现职级时间格式有误，格式：20201001或202010',
              type: 'error'
            })
            this.saveloading = false
            return false
          }

          let para = {
            id: this.editForm.id,
            sfzh: this.editForm.sfzh,
            sjhdwmc: this.showunitname,
            nd: this.editForm.nd,
            xm: this.editForm.xm,
            xb: this.editForm.xb,
            csny: this.editForm.csny,
            zzmm: this.editForm.zzmm,
            cjgzsj: this.editForm.cjgzsj,
            zyjszw: this.editForm.zyjszw,
            zw: this.editForm.zw,
            rxzwsj: this.editForm.rxzwsj,
            rxdcczwzjsj: this.editForm.rxdcczwzjsj,
            zj: this.editForm.zj,
            rxzjsj: this.editForm.rxzjsj,
            jsnkhqk: this.editForm.jsnkhqk,
            jybj: this.editForm.jybj,
            gzjl: this.editForm.gzjl,
            fggz: this.editForm.fggz,
            zytd: this.editForm.zytd,
            zybz: this.editForm.zybz,
            tzjy: this.editForm.tzjy,
            bz: this.editForm.bz
          }
          // if (this.importPhotoFlag) {
          //   para.a0000 = this.editForm.a0000
          // } else {
          //   para.tx = this.imageUrl
          // }
          // let url = ''
          if (para.id) {
            this.saveDate(para, false)
          } else {
            this.$http
              .post(this.$http.defaults.analysisAPI + 'api/busPerson/getExistsPersonId', {
                'nd': this.editForm.nd,
                'sfzh': this.editForm.sfzh
              })
              .then(response => {
                if (response.data.result) {
                  this.$confirm('该年度综合分析研判信息已存在，是否覆盖？', '提示', {
                    type: 'warning'
                  }).then(() => {
                    para.id = response.data.result
                    this.editForm.id = para.id
                    this.saveDate(para, false)
                  }).catch(() => {
                    this.$message({
                      message: '取消保存'
                    })
                    this.saveloading = false
                  })
                } else {
                  this.saveDate(para, true)
                }
              })
              .catch(error => {
                this.saveloading = false
                console.log(error)
                this.$message({
                  message: '网络保存失败:' + error,
                  type: 'error'
                })
              })
          }
        }
      })
    },
    saveDate (para, refreshFlag) {
      let url = 'api/busPerson/save'
      this.$http
        .post(this.$http.defaults.analysisAPI + url, para)
        .then(response => {
          this.saveloading = false
          if (response.data.success) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            if (refreshFlag) {
              this.$emit('refresh', this.idCardNo, this.editForm.nd)
              this.editFormReset()
            }
          } else {
            this.$message({
              message: '保存失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.saveloading = false
          console.log(error)
          this.$message({
            message: '网络保存失败:' + error,
            type: 'error'
          })
        })
    },
    isDate8 (sDate) {
      if (!/^[0-9]{8}$/.test(sDate)) {
        return false
      }
      var year, month, day
      year = sDate.substring(0, 4)
      month = sDate.substring(4, 6)
      day = sDate.substring(6, 8)
      var iaMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      if (year < 1700 || year > 2500) return false
      if (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0)) iaMonthDays[1] = 29
      if (month < 1 || month > 12) return false
      if (day < 1 || day > iaMonthDays[month - 1]) return false
      return true
    },
    isDate6 (sDate) {
      if (!/^[0-9]{6}$/.test(sDate)) {
        return false
      }
      var year, month
      year = sDate.substring(0, 4)
      month = sDate.substring(4, 6)
      if (year < 1700 || year > 2500) return false
      if (month < 1 || month > 12) return false
      return true
    }
  },
  mounted () {
    this.getDics()
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 150px;
    display: block;
  }
  #youngcadresedit h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0 0 20px;
  }
  #youngcadresedit .el-table{
    border: #95B8E7 solid 1px;
  }
  #youngcadresedit .mytable{
    border-top: 1px solid #74A6CC;
    border-left: 1px solid #74A6CC;
    margin: 10px;
    width: calc(100% - 20px);
    font-size:var(--size14) !important;
    font-family: '宋体'
  }
  #youngcadresedit .mytable th,
  #youngcadresedit .mytable td{
    padding: 10px;
    border-right: 1px solid #74A6CC;
    border-bottom: 1px solid #74A6CC;
    vertical-align:top;
    line-height: 150%;
    height: 22px;
  }
  #youngcadresedit .mytable th{
    background:#C0DCF1;
    width:120px;
    vertical-align: middle;
  }
  #youngcadresedit .mytable .passed th{
    background:#F7E4BB;
  }
  #youngcadresedit .mytable .passed td{
    background:#FBF0DB;
  }
  .youngnopic{
    background: url(../assets/nopic.gif) no-repeat;
    width: 120px;
    height: 150px;
  }
</style>
<style scoped>
.details{
  font-weight:bolder;
  border-bottom:1px solid #95B8E7;
  padding:0 10px;
  min-height: 36px;
}
</style>
